<template>
  <div class="zyll_box ">
      <div class="fontGjqy mb20">
        <span style="padding: 14px 0 0px 0">专业力量{{TableShow?"":`/${zyllid?"编辑":"添加"}数据`}}</span>
        <!-- <el-button class="btnDefault">保存</el-button> -->
      </div>
        <div class="table redwTable " style="overflow-y: auto" v-if="TableShow">
            <div class="buttonBox mb10">
                <el-button
                        style="margin-right: 10px"
                        @click="AddDataList"
                        class="btnDefault" v-if="!isNopower()"
                >添加数据</el-button
                >
                <el-button class="btnDefault" @click="muchDelect" v-if="!isNopower()">批量删除</el-button>
            </div>
            <el-table :data="sliceData" @selection-change="handleSelectionChange" row-key="zyllid"
                      border highlight-current-row style="width: 100%"  ref="multipleTable">
                <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                <el-table-column prop="zydlxmc" label="类型"></el-table-column>
                <el-table-column prop="dz" label="队长"></el-table-column>
                <el-table-column prop="dzdh" label="队长电话"></el-table-column>
                <el-table-column prop="zdjd" label="驻地经度"></el-table-column>
                <el-table-column prop="zdwd" label="驻地纬度"></el-table-column>
                <el-table-column prop="clsj" label="建立时间"></el-table-column>
                <el-table-column prop label="操作" width="250">
                    <template slot-scope="scope">
                <span
                        type="text" v-if="!isNopower()"
                        class="cursor"
                        @click="addPeople(scope.$index, scope.row)"
                        style="margin-right: 10px"
                >
                  <img src="../../assets/image/sjlr/添加成员_on.png" alt title='添加成员'/>
                </span>
                        <span
                                class="cursor" v-if="!isNopower()"
                                type="text"
                                @click="IconUpdata(scope.$index, scope.row)"
                                style="margin-right: 10px"
                        >
                  <img src="../../assets/image/sjlr/编辑_on.png" alt title='编辑'/>
                </span>
                        <span class="cursor normalColor" @click="IconUpdata(scope.$index, scope.row)" v-if="isNopower()">查看</span>

                        <span v-if="!isNopower()"
                              @click.prevent="DelectRow2(scope.$index, scope.row)"
                              class="normalColor cursor"
                        >
                  <img src="../../assets/image/sjlr/删除_on.png" alt title='删除'/>
                </span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page mt20">
                <pages :page="page1" @changePage="changePage1"></pages>
            </div>
        </div>
    <div class="gjqyDetailAdd" v-if="!TableShow">
      <el-form
        ref="form"
        :model="form"
        label-width="180px"
        style="height: 100%"
      >
        <div class=" txsxstyle" style="height: 100%;">
          <span class="style_title">基本信息</span>
          <div class="txsxstyle_box">
            <div class="formBox">
              <el-form-item
                v-for="(item, index) in form.jbsxArr"
                :label="item.sxmc"
                :key="index"
                :prop="'jbsxArr.' + index + '.sxvalue'"
                :rules="checkRules(item)"
              >
                <el-input
                  class="noBg border1"
                  v-show="item.sxlx == 0 || item.sxlx == 4 || item.sxlx == 5"
                  style="width: 440px;"
                  v-model="item.sxvalue"
                ></el-input>
                <el-select
                  class="noBg border1"
                  style="width: 440px;"
                  v-model="item.sxvalue"
                  v-show="item.sxlx == 1"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="option in item.selectOption"
                    :key="option.zdID"
                    :label="option.zdmc"
                    :value="option.zdID"
                  ></el-option>
                </el-select>

                <el-date-picker
                  class="noBg border1"
                  style="width: 440px;"
                  v-model="item.sxvalue"
                  v-show="item.sxlx == 2"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="timestamp"
                  placeholder="选择日期"
                ></el-date-picker>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>

      <div class="textRight mt20">
        <el-button class="btnDefault" @click="saveData" v-if="!isNopower()">保存</el-button>
        <el-button class="btnDefault" @click="TableShow = true"
          >取消
        </el-button>
      </div>
    </div>
    <el-dialog class="noBg" title="专业队成员" width="1600px" :visible.sync="dialogTableVisible">
      <table>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>出生日期</th>
          <th width="120">所在公司部门</th>
          <th>电话</th>
          <th>角色</th>
          <th>职责</th>
          <th>职位</th>
          <th>最高学历</th>
          <th>编组类型</th>
          <th>职称</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in sonList" :key="item.id">
          <td v-for="i in item.mc" :key="i.id">
            <input
              v-model="i.value"
              v-show="i.type == 1"
              :placeholder="'请输入' + i.name"
              type="text"
            />
            <el-date-picker
              class="noBg "
              style="width: 130px;"
              v-model="i.value"
              v-if="i.type == 2"
              type="date"
              :prefix-icon="''"
              format="yyyy-MM-dd"
              value-format="timestamp"
              placeholder="选择日期"
            ></el-date-picker>
            <el-select
              v-model="i.value"
              v-if="i.type == 3"
              placeholder="请选择"
            >
              <el-option
                v-for="item in i.optionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </td>
          <td
            @click="addMkuai"
            v-if="sonList.length == 1 || index == sonList.length - 1"
          >
            +
          </td>
          <td @click="reduceMkuai(index)" v-else>-</td>
        </tr>
      </table>

      <div slot="footer" class="dialog-footer">
        <el-button class="btnDefault" @click="dialogTableVisible = false"
          >取 消</el-button
        >
        <el-button class="btnDefault" type="primary" @click="zyllCy"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import pages from "../base/pages";
import { baseServe } from "../../request/api";

export default {
  name: "zyll",
  data() {
    return {
      zyllidArr: "",
      addPeoI: "",
      addZyllid: "",
      zyllid: "",
      radio: 3,
      value: "",
      dialogTableVisible: false,
      title: "",
      msg: "芳烃厂",
      form: {
        jbsxArr: [
          {"sxvalue":"","sxID": "zydmc", "sxmc": "名称", "sxlx": "0", "description": null, "sxzd": "zydmc", "isbt": "1" },
          {"sxvalue":"","sxID": "zydlx", "sxmc": "类型", "sxlx": "1","selectOption":[{ zdmc: "工程防护队", zdID: "7001" }, { zdmc: "工程抢险抢修队", zdID: "7002" }, {zdmc: "水务抢险抢修队", zdID: "7003"}, {zdmc: "电力抢险抢修队", zdID: "7004"}, {zdmc: "供气抢险抢修队", zdID: "7005"}, {zdmc: "医疗救护队", zdID: "7006"}, {zdmc: "消防队", zdID: "7007"}, {zdmc: "防化队", zdID: "7008"}, {zdmc: "卫生防疫队", zdID: "7009"}, {zdmc: "通信队", zdID: "7010"}, {zdmc: "运输队", zdID: "7011"}, {zdmc: "伪装设障队", zdID: "7012"}, {zdmc: "信息防护队", zdID: "7013"}, {zdmc: "心理防护队", zdID: "7014"}, {zdmc: "其他", zdID: "7015"}], "description": null, "sxzd": "zydlx", "isbt": "1" },
          {"sxvalue":"","sxID": "czdd", "sxmc": "常驻地点", "sxlx": "0", "description": null, "sxzd": "czdd", "isbt": "0" },
          {"sxvalue":"","sxID": "clsj", "sxmc": "建立时间", "sxlx": "2","description": null, "sxzd": "clsj", "isbt": "0" },
          {"sxvalue":"","sxID": "dz", "sxmc": "队长", "sxlx": "0", "description": null, "sxzd": "dz", "isbt": "1" },
          {"sxvalue":"","sxID": "dzdh", "sxmc": "队长电话", "sxlx": "0", "description": null, "sxzd": "dzdh", "isbt": "1" },
          {"sxvalue":"","sxID": "zdjd", "sxmc": "驻地经度", "sxlx": "5", "description": null, "sxzd": "zdjd", "isbt": "1" },
          {"sxvalue":"","sxID": "zdwd", "sxmc": "驻地纬度", "sxlx": "5", "description": null, "sxzd": "zdwd", "isbt": "1" },
          {"sxvalue":"","sxID": "createTime", "sxmc": "采集时间", "sxlx": "2", "description": null, "sxzd": "createTime", "isbt": "0" },
          {"sxvalue":"","sxID": "updateTime", "sxmc": "更新时间", "sxlx": "2", "description": null, "sxzd": "updateTime", "isbt": "0" },
          {"sxvalue":"","sxID": "zydzz", "sxmc": "职责", "sxlx": "0", "description": null, "sxzd": "zydzz", "isbt": "0" },
        ]
      },
      page1: {
        //总条数
        total: 0,
        //每页条数
        limit: 10,
        //当前页数
        currentPage: 1,
        pageSizes: [5, 10],
        //实际返回的条数
        dataLength: 7
      },
      //职称  在编 性别 学历
      zcList: [
        {
          value: "10701",
          label: "高级"
        },
        {
          value: "10702",
          label: "中级"
        },
        {
          value: "10703",
          label: "初级"
        },
        {
          value: "10704",
          label: "其他"
        }
      ],
      bzList: [
        {
          value: "1",
          label: "在编"
        },
        {
          value: "2",
          label: "扩编"
        },
        {
          value: "3",
          label: "在编和扩编"
        }
      ],
      xbList: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        }
      ],
      xlList: [
        {
          value: "10601",
          label: "博士研究生"
        },
        {
          value: "10602",
          label: "硕士研究生"
        },
        {
          value: "10603",
          label: "本科"
        },
        {
          value: "10604",
          label: "专科"
        },
        {
          value: "10605",
          label: "中专/高中"
        },
        {
          value: "10606",
          label: "初中"
        },
        {
          value: "10607",
          label: "小学"
        }
      ],
      sonList: [
        {
          mc: [
            {
              name: "姓名",
              value: "",
              type: 1
            },
            {
              name: "性别",
              value: "",
              type: 3,
              optionList: [
                {
                  value: "男",
                  label: "男"
                },
                {
                  value: "女",
                  label: "女"
                }
              ]
            },
            {
              name: "出生日期",
              value: "",
              type: 2
            },
            {
              name: "所在公司部门",
              value: "",
              type: 1
            },
            {
              name: "电话",
              value: "",
              type: 1
            },
            {
              name: "角色",
              value: "",
              type: 1
            },
            {
              name: "职责",
              value: "",
              type: 1
            },
            {
              name: "职位",
              value: "",
              type: 1
            },
            {
              name: "最高学历",
              value: "10601",
              type: "3",
              optionList: [
                {
                  value: "10601",
                  label: "博士研究生"
                },
                {
                  value: "10602",
                  label: "硕士研究生"
                },
                {
                  value: "10603",
                  label: "本科"
                },
                {
                  value: "10604",
                  label: "专科"
                },
                {
                  value: "10605",
                  label: "中专/高中"
                },
                {
                  value: "10606",
                  label: "初中"
                },
                {
                  value: "10607",
                  label: "小学"
                }
              ]
            },
            {
              name: "编组类型",
              value: "1",
              type: "3",
              optionList: [
                {
                  value: "1",
                  label: "在编"
                },
                {
                  value: "2",
                  label: "扩编"
                },
                {
                  value: "3",
                  label: "在编和扩编"
                }
              ]
            },
            {
              name: "职称",
              value: "10701",
              type: "3",
              optionList: [
                {
                  value: "10701",
                  label: "高级"
                },
                {
                  value: "10702",
                  label: "中级"
                },
                {
                  value: "10703",
                  label: "初级"
                },
                {
                  value: "10704",
                  label: "其他"
                }
              ]
            }
          ]
        }
      ],
      tableData: [],
      sliceData: [],
      TableShow: true
    };
  },
  computed: {
    zyjjmbId(){
      return this.$store.state.zyjjmbId
    }
  },
  mounted() {
    this.getGjqyTable();
    this.pages();
  },
  methods: {
    //判断校验规则
    checkRules(item) {
      let arr = [];
      if (item.isbt == "1") {
        arr.push({
          required: true,
          message: "必填字段",
          trigger: ["blur", "change"]
        });
      }
      if (item.sxlx == 0) {
        arr.push({ validator: this.checkStringLength, trigger: "blur" });
      }
      if (item.sxlx == 4) {
        arr.push({ validator: this.checkNum, trigger: "blur" });
      }
      if (item.sxlx == 5) {
        arr.push({ validator: this.checkNumber, trigger: "blur" });
      }
      // if (item.sxzd == "zbdh") {
      //   arr.push({ validator: this.checkphone, trigger: ["change", "blur"] });
      // }
      if (item.sxzd == "dzdh") {
        arr.push({ validator: this.checkMobile, trigger: ["change", "blur"] });
      }
      if (item.sxmc == "驻地经度") {
        arr.push({ validator: this.checkJD, trigger: ["change", "blur"] });
      }
      if (item.sxmc == "驻地纬度") {
        arr.push({ validator: this.checkWD, trigger: ["change", "blur"] });
      }
      return arr;
    },
    handleSelectionChange(val) {
      // let arr=[]
      this.zyllidArr = "";
      let arr = [];
      val.forEach(item => {
        arr.push(item.zyllid);
      });
      this.zyllidArr = arr.join(",");
    },
    //批量删除
    muchDelect() {
      if (this.zyllidArr == "") {
        this.$message({ type: "warning", message: "请先勾选需要删除的数据" });
      } else {
        let params = {
          zyllID: this.zyllidArr
        };
        this.$confirm("此操作将批量删除选中项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          baseServe.zyllDelect(params).then(res => {
            this.$message({
              message: "删除成功!",
              type: "success"
            });
            this.getGjqyTable();
            this.selectRowArr=[]
          });
        });
      }
    },
    //专业力量删除
    DelectRow2(index, row) {
      let params = {
        zyllID: row.zyllid
      };
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        baseServe.zyllDelect(params).then(res => {
          this.$message({
            message: "删除成功!",
            type: "success"
          });
          this.getGjqyTable();
          this.selectRowArr=[]
        });
      });
    },
    zyllCy() {
      let arr = [];
      this.sonList.forEach((item, index) => {
        arr.push({
          bzlx: item.mc[9].value,
          csrq: item.mc[2].value,
          dh: item.mc[4].value,
          js: item.mc[5].value,
          szgsbm: item.mc[3].value,
          xb: item.mc[1].value,
          xm: item.mc[0].value,
          zc: item.mc[10].value,
          zgxl: item.mc[8].value,
          zgxlmc: "",
          zw: item.mc[7].value,
          zyjjmbid: this.zyjjmbId,
          zyllcyid: item.zyllcyid,
          zyllid: this.zyllid,
          zz: item.mc[6].value,
          rfdwnm:this.$store.state.zyjjmbRfdwnm
        });
      });
      let noXmFlag=true
      //如果名字不填就将整条删掉
      for(let i=0;i<arr.length;i++) {
        if(arr[i].xm==""){
          noXmFlag=false
         // arr.splice(i, 1);
        }
      }
      if(!noXmFlag){
        this.$message({
          message: "请填写专业力量成员姓名!",
          type: "warning"
        });
        return
      }

      baseServe.zyllcy(arr).then(res => {
        this.$message({
          message: "保存成功!",
          type: "success"
        });
      });
      this.dialogTableVisible = false;
    },
    saveData() {
      this.$store.state.loadingFlag = false;
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = {};
          this.form.jbsxArr.map(v => {
            if (v.sxzd) {
              params[v.sxzd] = v.sxvalue;
              if(v.sxlx==2){
                params[v.sxzd] =v.sxvalue?new Date(v.sxvalue).getTime() :v.sxvalue
              }
            }
          });
          params.zyjjmbid = this.zyjjmbId;
          if (this.zyllid) {
            params.zyllid = this.zyllid;
          }
          params.rfdwnm=this.$store.state.zyjjmbRfdwnm||null
          baseServe
            .zylldata(params)
            .then(res => {
              if (this.zyjjmbid !== "") {
                this.$message({
                  message: "保存成功!",
                  type: "success"
                });
                this.AddDataList()
                this.TableShow = true;
              } else {
                this.$message({
                  message: "新增成功!",
                  type: "success"
                });
              }
              this.getGjqyTable();
            })
            .catch(error => {
              this.$message({
                message: "服务器错误!",
                type: "success"
              });
            });
        } else {
          this.$message({ type: "warning", message: "请填写完整信息" });
        }
      });

    },
    AddDataList() {
      this.title = "新增";
      this.zyllid = "";
      this.TableShow = false;
      this.form.jbsxArr.forEach(i => {
        i.sxvalue = "";
      });
    },
    IconUpdata(i, row) {
      this.zyllid = row.zyllid;
      this.title = "修改";
      this.TableShow = false;
      this.form.jbsxArr.forEach((item,index)=>{
        this.form.jbsxArr[index].value=''
      })
      let jbsxArrClone = this.form.jbsxArr;
      jbsxArrClone.map(v => {
        for (let k in row) {
          if (k == v.sxzd) {
            v.sxvalue = row[k];
            if (v.sxlx == 2 && v.sxvalue) {
              v.sxvalue = new Date(v.sxvalue).getTime();
            }
          }
        }
      });
    },
    addPeople(index, row) {
      this.sonList = [
        {
          mc: [
            {
              name: "姓名",
              value: "",
              type: 1
            },
            {
              name: "性别",
              value: "",
              type: 3,
              optionList: [
                {
                  value: "男",
                  label: "男"
                },
                {
                  value: "女",
                  label: "女"
                }
              ]
            },
            {
              name: "出生日期",
              value: "",
              type: 2
            },
            {
              name: "所在公司部门",
              value: "",
              type: 1
            },
            {
              name: "电话",
              value: "",
              type: 1
            },
            {
              name: "角色",
              value: "",
              type: 1
            },
            {
              name: "职责",
              value: "",
              type: 1
            },
            {
              name: "职位",
              value: "",
              type: 1
            },
            {
              name: "最高学历",
              value: "10601",
              type: "3",
              optionList: [
                {
                  value: "10601",
                  label: "博士研究生"
                },
                {
                  value: "10602",
                  label: "硕士研究生"
                },
                {
                  value: "10603",
                  label: "本科"
                },
                {
                  value: "10604",
                  label: "专科"
                },
                {
                  value: "10605",
                  label: "中专/高中"
                },
                {
                  value: "10606",
                  label: "初中"
                },
                {
                  value: "10607",
                  label: "小学"
                }
              ]
            },
            {
              name: "编组类型",
              value: "1",
              type: "3",
              optionList: [
                {
                  value: "1",
                  label: "在编"
                },
                {
                  value: "2",
                  label: "扩编"
                },
                {
                  value: "3",
                  label: "在编和扩编"
                }
              ]
            },
            {
              name: "职称",
              value: "10701",
              type: "3",
              optionList: [
                {
                  value: "10701",
                  label: "高级"
                },
                {
                  value: "10702",
                  label: "中级"
                },
                {
                  value: "10703",
                  label: "初级"
                },
                {
                  value: "10704",
                  label: "其他"
                }
              ]
            }
          ]
        }
      ];
      this.dialogTableVisible = true;
      this.addPeoI = index;
      this.addZyllid = row.zyllid;
      this.zyllid = row.zyllid;
      let params = {
        zyllID: row.zyllid
      };
      baseServe.zhjgSinglDdata(params).then(res => {
        res = res.data.zyllModel;
        if (res.zyllcyInfos.length !== 0) {
          this.sonList = [];
        }
        res.zyllcyInfos.forEach(item => {
          this.sonList.push({
            mc: [
              {
                name: "姓名",
                value: item.xm,
                type: 1
              },
              {
                name: "性别",
                value: item.xb,
                type: 3,
                optionList: this.xbList
              },
              {
                name: "出生日期",
                value: item.csrq ? new Date(item.csrq).getTime() : "",
                type: 2
              },
              {
                name: "所在公司部门",
                value: item.szgsbm,
                type: 1
              },
              {
                name: "电话",
                value: item.dh,
                type: 1
              },
              {
                name: "角色",
                value: item.js,
                type: 1
              },
              {
                name: "职责",
                value: item.zz,
                type: 1
              },
              {
                name: "职位",
                value: item.zw,
                type: 1
              },
              {
                name: "最高学历",
                value: item.zgxl,
                type: "3",
                optionList: this.xlList
              },
              {
                name: "编组类型",
                value: item.bzlx,
                type: "3",
                optionList: this.bzList
              },
              {
                name: "职称",
                value: item.zc,
                type: "3",
                optionList: this.zcList
              }
            ],
            zyllcyid: item.zyllcyid,
            zyllid: item.zyllid
          });
        });
      });
      // row.zyllcyInfos.forEach(item => {
      //   this.sonList.push({

      //   })
      // });
    },
    addMkuai() {
      this.sonList.push({
        mc: [
          {
            name: "姓名",
            value: "",
            type: 1
          },
          {
            name: "性别",
            value: "",
            type: 3,
            optionList: this.xbList
          },
          {
            name: "出生日期",
            value: "",
            type: 2
          },
          {
            name: "所在公司部门",
            value: "",
            type: 1
          },
          {
            name: "电话",
            value: "",
            type: 1
          },
          {
            name: "角色",
            value: "",
            type: 1
          },
          {
            name: "职责",
            value: "",
            type: 1
          },
          {
            name: "职位",
            value: "",
            type: 1
          },
          {
            name: "最高学历",
            value: "",
            type: "3",
            optionList: this.xlList
          },
          {
            name: "编组类型",
            value: "",
            type: "3",
            optionList: this.bzList
          },
          {
            name: "职称",
            value: "",
            type: "3",
            optionList: this.zcList
          }
        ],
        zyllid: this.addZyllid
      });
    },
    //删除
    reduceMkuai(index) {
      this.sonList.splice(index, 1);
    },
    // 获取列表数据
    getGjqyTable() {
      baseServe
        .getGjqyTable({
          queryType: "zyll",
          zyjjmbId: this.zyjjmbId
        })
        .then(res => {
          if (res.data.zyllInfos) {
            this.tableData = res.data.zyllInfos;
            this.page1.total = this.tableData.length;
            this.page1.currentPage = 1;
          }
        })
        .then(() => {
          this.pages();
        });
    },
    pages() {
      this.page1.total = this.tableData.length;
      let begin = (this.page1.currentPage - 1) * this.page1.limit;
      let end = this.page1.currentPage * this.page1.limit;
      this.sliceData = this.tableData.slice(begin, end);
      //  this.page1.total = Math.ceil(this.tableData.length / this.page1.limit);
      // 计算得0时设置为1
      // this.TreeDataList();
    },
    zyjjmbDetailAddBack() {
      this.zyjjmbDetailAddShow = false;
      this.zyjjmbTableShow = true;
    },
    changeZyjjmbDetailBox() {
      this.zyjjmbDetailAddShow = true;
      this.zyjjmbTableShow = false;
    },
    changePage1(data) {
      this.page1 = data;
      this.pages();
      // this.userList1();
    }
  },
  components: {
    pages
  }
};
</script>
<style lang="less" scoped>
.zyll_box {
  height: 100%;
  width: 100%;
    .gjqyDetailAdd{
        height: calc(100% - 100px);
    }
  .fontGjqy {
    height: 40px;
    width: 100%;
    font-family: "Microsoft Yahei-Bold";
    color: #00ffff;
    font-size: 18px;
    display: flex;
    margin-bottom: 15px;
    position: relative;
    .el-button {
      position: absolute;
      right: 40px;
      top: 10px;
    }
  }
  .redwTable {
    width: 100%;
    height: calc(100% - 150px);
    // overflow-y: auto;
    &::-webkit-scrollbar {
      width: 6px;
        height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: rgba(5, 230, 230, 0.6);
      border-radius: 30px;
    }
    .detailTitle {
      font-family: "Microsoft Himalaya";
      font-size: 18px;
      color: #00ffff;
    }
    .buttonBox {
      /*margin-top: 20px;*/
      .el-button:focus,
      .el-button:hover {
        color: #e4e4e4;
        border: none;
      }
      .btnDefault:active {
        /*background-color: #0e757a;*/
        /*box-shadow:  0px 0px 10px 5px #08b1b6 inset;*/
        background-image: url("../../assets/image/sjlr/add_on.png");
        color: #e4e4e4;
      }
      .btnDefault:focus {
        background-color: #0e757a;
        padding: 10px 30px;
        color: #e4e4e4;
        border: none;
      }
    }
    .right_one_body {
      margin-top: 10px;
      background-color: transparent;
      height: 100%;
      width: 100%;
      padding: 0;
      position: relative;
      box-sizing: border-box;
      // .el-table th {
      //   background-color: #11657d;
      //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
      //   color: white;
      // }
      .el-table__body tr.current-row > td {
        background-color: transparent;
      }

      .page {
        margin-top: 20px;
      }
    }
  }
  .el-dialog__body {
    padding: 31px 15px 40px 15px;
    width: 1360px;
    table {
      width: 100%;
      max-height: 350px;
      overflow-y: auto;
      border: 1px solid rgba(5, 230, 230, 0.6);
      tr {
        width: 100%;
        height: 40px;
        th {
          width: 150px;
          color: #ccc;
          font-weight: 700;
          border: 1px solid rgba(5, 230, 230, 0.6);
        }
        td {
          width: 300px;
          height: 40px;
          text-align: center;
          border: 1px solid rgba(5, 230, 230, 0.6);
          &:last-of-type {
            cursor: pointer;
            color: #00ffff;
            font-size: 20px;
            font-weight: 700;
          }
          input {
            width: 100%;
            background: transparent;
            color: white;
            border: none;
            text-align: center;
          }
        }
      }
    }
    .dialogBox {
      height: 50%;
      width: calc(100% - 25px);
      border: 1px solid rgba(5, 230, 230, 0.3);
      // border-top: 1px solid #00ffff;
      // overflow-y: auto;
      margin: 0 10px 10px 5px;
      .jbxxStyle_bottom_box {
        overflow-y: auto;
        height: 425px;
        &::-webkit-scrollbar {
          width: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: rgba(5, 230, 230, 0.6);
          border-radius: 30px;
        }
      }

      .style_form {
        position: relative;
        .fromSelect {
          // border: 1px solid rgba(5, 230, 230, 0.3);
          padding-top: 20px;
          overflow-y: auto;
          position: relative;
          .el-form-item {
            display: inline-block;
            .el-form-item__label {
              width: 100px;
              font-size: 15px;
              font-weight: 700;
              color: rgba(197, 197, 197, 0.63);
            }
          }
        }
        .icon {
          position: absolute;
          right: 10px;
          top: 48%;
          cursor: pointer;
          font-size: 20px;
          color: rgba(5, 230, 230, 0.6);
        }
      }

      .style_title {
        height: 30px;
        font-weight: 700;
        font-size: 20px;
        display: block;
        color: white;
        padding: 10px;
        color: #00ffff;
      }
    }
  }
}
</style>
